<script setup>
import ComponentPanel from './components/component-panel/index.vue'
import FormPanel from './components/form-panel/index.vue'
import ConfigPanel from './components/config-panel/index.vue'
import { provideDragKey, provideFormKey } from './hooks/use-provide-key'

import { vClickOutside } from '@/directives'

const schema = ref({
  id: '',
  name: '',
  formProps: {
    size: 'small',
    inline: false,
    labelPosition: 'right',
    labelWidth: 120,
    labelSuffix: '：',
    disabled: false,
    hideRequiredAsterisk: false,
    requireAsteriskPosition: 'left',
    scrollToError: true,
  },
  data: {},
  fieldList: [],
})

// const updateSchema = data => {
//   schema.value.formProps = data?.formProps ?? {}
//   schema.value.data = data?.data ?? {}
//   const len = schema.value?.fieldList?.length ?? 0
//   schema.value.fieldList?.splice(0, len)
//   schema.value.fieldList?.push(...(data?.fieldList ?? []))
// }

const currentItem = ref({})

const handleOutside = () => {
  currentItem.value = {}
}

const group = readonly({
  name: 'formContainer',
  pull: 'clone',
  put: false,
})
provide(provideDragKey, { group })
provide(provideFormKey, { schema })

const formPanelRef = useTemplateRef('formPanelRef')
const getHtml = async () => {
  await nextTick()
  return formPanelRef.value?.$el?.innerHTML
}

defineExpose({ schema, getHtml })
</script>

<template>
  <el-container
    v-click-outside="handleOutside"
    class="h-full gap-2"
  >
    <el-aside width="250px">
      <ComponentPanel />
    </el-aside>
    <el-main class="p-0!">
      <FormPanel
        ref="formPanelRef"
        v-model:schema="schema"
        v-model:currentItem="currentItem"
      />
    </el-main>
    <el-aside width="30%">
      <ConfigPanel
        v-model:schema="schema"
        v-model:currentItem="currentItem"
      />
    </el-aside>
  </el-container>
</template>
